<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <title>Document</title>
    
</head>
<body>
    <main id="app">
        <img :src="path" alt="" @mousedown='md($event)' draggable="false">
    </main>
    <script>      
        var vue = new Vue({
            el:"#app",
            data:{
              index:1
            },
            methods: {
                md:function(e){
                    var pointX = e.pageX
                    var that = this
                    var mv  = function(event){
                      pointX =  that.updatePoint(event,pointX)
                    }
                    document.addEventListener('mousemove',mv)
                    
                    document.addEventListener('mouseup',function(){
                        document.removeEventListener('mousemove',mv)
                    })
                },
               updatePoint:function(e,pointX){                                 
                  if(e.pageX - pointX > 40){
                      this.index ++
                      if(this.index >= 23){
                          this.index = 1
                      }
                  }
                  else if(e.pageX - pointX < -40){
                      this.index --
                      if(this.index <= 1){
                          this.index = 23
                      }
                  }
                  else{
                      return pointX
                  }
                  return e.pageX

                }
            },
            computed: {
                path:function(){
                    return 'img/'  + this.index + '.png'
                }
            },
        })
    </script>
</body>
</html>